Vue.component("login", {
    template: `
    <span>
        <div class="pointer">
            <svg t="1717503991684" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="18618" width="256" height="256">
                <path
                     d="M178.64283631 625.88127528l281.28393447-639.17927465a56.888889 56.888889 0 0 1 104.14645844 0l281.24370858 639.25972784a56.888889 56.888889 0 0 1-75.6057429 74.68053328l-257.7916481-117.19996429-257.69108124 117.13962474a56.888889 56.888889 0 0 1-75.58562925-74.70064692z"
                     p-id="18619"></path>
            </svg>
        </div>
        <div class="header">
            <div class="header-wrap">
                        <div class="header-logo">
                            <a class="w2e-logo" href="index.html">
                                <img src="//qimgs.qunarzz.com/wpf_newmpic_001/54f70ce8dd89589d3fd2289dcc25b7d8.jpg"
                                     title="去哪儿网" />
                            </a>
                        </div>
                        <div>
                            <ul class="header-ul">
                                <li style="background-color: #ff9d00;color: white;width: 60px;">首页</li>
                                <li style="width: 74px;">目的地</li>
                                <li style="width: 88px;">旅游攻略</li>
                                <li style="width: 70px;">去旅行</li>
                                <li style="width: 54px">社区</li>
                                <li style="width: 74px">找搭子</li>
                            </ul>
                        </div>
                        <slot v-if="!user" name="nologin"></slot>
                        <slot v-else name="logined"  v-bind:m="user"></slot>
                    </div> 
        </div>
        <div class="container">
                    <div class="container-image">
                        <ul class="show-image">
                            <li class="first-image"><a><img src="images/1.jpg" /></a></li>
                            <li><a href="javascript:void(0)"><img src="images/2.jpg" /></a></li>
                            <li><a href="javascript:void(0)"><img src="images/3.jpg" /></a></li>
                            <li><a href="javascript:void(0)"><img src="images/4.jpg" /></a></li>
                            <li><a href="javascript:void(0)"><img src="images/5.jpg" /></a></li>
                        </ul>
                        <ul class="show-nav">
                            <li><a><img src="images/1.jpg" /></a></li>
                            <li><a><img src="images/2.jpg" /></a></li>
                            <li><a><img src="images/3.jpg" /></a></li>
                            <li><a><img src="images/4.jpg" /></a></li>
                            <li><a><img src="images/5.jpg" /></a></li>
                        </ul>
                        <div class="show-search">
                            <div class="search-tab">
                                <ul>
                                    <li class="active"><i></i>全部</li>
                                    <li><i></i>目的地</li>
                                    <li><i></i>去旅行</li>
                                </ul>
                            </div>
                            <div class="search-input">
                                <input placeholder="搜目的地/攻略/旅行特价" />
                            </div>
                            <div class="search-button">
                                <a><img src="images/搜索.png"></a>
                            </div>
                        </div>
                    </div>
                    <div class="container-main">
                        <div class="main-left">
                            <div class="left-tip">
                                <a href="javascript:void(0)"><img src="images/index-link-v2.png"></a>
                            </div>
                            <div class="left-recommend">
                                <div class="left-title">
                                    <h3>旅游攻略推荐</h3><a href="javascript:void(0)" style="color: #999;">更多</a>
                                </div>
                                <div class="left-img">
                                    <a href="https://www.mafengwo.cn/gonglve/ziyouxing/409868.html?cid=1010617">
                                        <img src="images/1.jpg">
                                    </a>
                                </div>
                                <div class="left-article">
                                    <a href="https://www.mafengwo.cn/gonglve/ziyouxing/409868.html?cid=1010617">
                                        徐州旅行须知！行前看这篇就够了
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="main-right">
                            <div class="right-clearfix">
                                <ul>
                                    <li style="width: 170px;">
                                        <a href="javascript:void(0)" onclick="scrollToSection('section2')"
                                           id="section2">热门游记</a>
                                        <span @click="siftVisible=true">
                                    <i class="bi bi-list-ul" style="margin-right: 4px;"></i>筛选
                                </span>
                                    </li>
                                    <li style="width: 120px;">
                                        <a href="javascript:void(0)" onclick="scrollToSection('section2')"
                                           id="section2" @click="getLatest">最新发表</a>
                                    </li>
                                </ul>
                                <div class="right-write"><a @click="toWrite" ><i class="bi bi-pencil-square"></i>写游记</a></div>
                            </div>
                            <div class="right-items">
                                <div v-for="(item,index) in travelogues" class="item" :key="index" @click="view(item.travelogueId)">
                                    <div class="item-img">
                                        <a href="javascript:void(0)"><img :src="item.backImg"></a>
                                    </div>
                                    <div class="item-main">
                                        <dl>
                                            <dt><a href="javascript:void(0)">{{item.title}}</a></dt>
                                            <dd><a href="javascript:void(0)" v-html="getParagraphContent(item)">
                                            </a></dd>
                                        </dl>
                                        <div class="item-extra">
                                        <span class="extra-place"><i class="bi bi-geo-alt-fill"></i><a
                                            href="javascript:void(0)">{{item.addr}}</a>，by</span>
                                            <span class="extra-user"><a href="javascript:void(0)"><img :src="item.avatar" />{{item.username}}</a></span>
                                            <span class="extra-nums"><i class="bi bi-eye-fill"></i>555/22</span>
                                            <span class="extra-ding">
                                                <a href="javascript:void(0)">444444444
                                                <i class="bi bi-hand-thumbs-up-fill"></i>
                                                </a>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="right-sift" v-if="siftVisible">
                                <div><a @click="siftVisible=false" class="close" href="javascript:void(0)">×</a></div>
                                <div class="sift-section">
                                    <div class="sift-section-left">目的地</div>
                                    <div class="sift-section-right">
                                        <input type="text" placeholder="输入你想查看的地方"/>
                                        <ul>
                                            <li>斯里兰卡</li>
                                            <li>济州岛</li>
                                            <li>香港</li>
                                            <li>北京</li>
                                            <li>萍乡</li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="sift-interesting">
                                    <div class="sift-interesting-left">兴趣</div>
                                    <div class="sift-interesting-right">
                                        <ul>
                                            <li><a><span><img src="images/1.jpg"></span><h3>吃遍天下</h3><p>无敌手</p></a></li>
                                            <li><a><span><img src="images/1.jpg"></span><h3>带着对象</h3><p>去虐狗</p></a></li>
                                            <li><a><span><img src="images/1.jpg"></span><h3>姑娘漂亮</h3><p>就是美</p></a></li>
                                            <li><a><span><img src="images/1.jpg"></span><h3>登山徒步</h3><p>用脚走</p></a></li>
                                            <li><a><span><img src="images/1.jpg"></span><h3>带着父母</h3><p>去远方</p></a></li>
                                            <li><a><span><img src="images/1.jpg"></span><h3>带着孩子</h3><p>看世界</p></a></li>
                                            <li><a><span><img src="images/1.jpg"></span><h3>独自一人</h3><p>最自由</p></a></li>
                                            <li><a><span><img src="images/1.jpg"></span><h3>短途周末</h3><p>散散心</p></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="right-pageup">
                                <el-pagination
                                  @size-change="handleSizeChange"
                                  @current-change="pageQuery"
                                  :current-page.sync="currentPage3"
                                  :page-size="size"
                                  layout="prev, pager, next, jumper"
                                  :total="total">
                                </el-pagination>
                            </div>
                        </div>
                    </div>
                </div>
        <div class="footer">
                    <div class="footer-wrap">
                        <div class="footer-section about">
                            <h4>关于我们</h4>
                            <ul>
                                <li><a href="#">公司简介</a></li>
                                <li><a href="#">联系我们</a></li>
                                <li><a href="#">加入我们</a></li>
                                <li><a href="#">法律声明</a></li>
                            </ul>
                        </div>
                        <div class="footer-section help">
                            <h4>用户帮助</h4>
                            <ul>
                                <li><a href="#">常见问题</a></li>
                                <li><a href="#">服务条款</a></li>
                                <li><a href="#">隐私政策</a></li>
                                <li><a href="#">意见反馈</a></li>
                            </ul>
                        </div>
                        <div class="footer-section follow">
                            <h4>关注我们</h4>
                            <div class="social-media">
                                <a href="#"><img src="images/qq.png" alt="QQ"></a>
                                <a href="#"><img src="images/wx.png" alt="微信"></a>
                                <a href="#"><img src="images/wb.png" alt="微博"></a>
                                <a href="#"><img src="images/facebook.png" alt="Facebook"></a>
                                <a href="#"><img src="images/blbl.png" alt="哔哩哔哩"></a>
                            </div>
                        </div>
                        <div class="footer-section links">
                            <h4>友情链接</h4>
                            <ul>
                                <li><a href="#">合作伙伴1</a></li>
                                <li><a href="#">合作伙伴2</a></li>
                                <li><a href="#">合作伙伴3</a></li>
                                <li><a href="#">合作伙伴4</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="footer-bottom">
                        <p>&copy; 2024 去哪儿网. 保留所有权利. | 京ICP备 12345678 号 | 京公网安备 11000002000001 号</p>
                    </div>
                </div>
    </span>
    `,
    data() {
        return {
            siftVisible: false,
            user: null,
            currentPage3: 1,
            travelogues:[],
            total:100,
            page:1,
            size:5
        }
    },
    mounted(){
        axios.get("/users/isLogin").then( res =>{
            this.user = res.data.data;
            this.$emit('user-loaded', this.user);
        });

        this.query('');
    },
    watch: {
        user(newValue, oldValue) {
            if (newValue) {
                this.$nextTick(() => {
                    this.addHoverListeners();
                });
            }
        }
    },
    methods: {
        addHoverListeners() {
            this.$nextTick(() => {
                let msg = document.querySelector('.msg');
                let msgTips = document.querySelector('.msg-tips');

                let per = document.querySelector('.per');
                let perTips = document.querySelector('.user-tips');

                let msgTimer; // 用于存储显示和隐藏 msg-tips 的定时器
                let perTimer; // 用于存储显示和隐藏 per-tips 的定时器

                if (msg && msgTips) {
                    // 监听 msg 的鼠标悬停事件
                    msg.addEventListener('mouseenter', function() {
                        clearTimeout(msgTimer);
                        msgTips.style.display = 'block';
                    });

                    // 监听 msg 的鼠标离开事件
                    msg.addEventListener('mouseleave', function() {
                        msgTimer = setTimeout(function() {
                            msgTips.style.display = 'none';
                        }, 300);
                    });

                    // 监听 msg-tips 的鼠标进入事件
                    msgTips.addEventListener('mouseenter', function() {
                        clearTimeout(msgTimer);
                    });

                    // 监听 msg-tips 的鼠标离开事件
                    msgTips.addEventListener('mouseleave', function() {
                        msgTimer = setTimeout(function() {
                            msgTips.style.display = 'none';
                        }, 300);
                    });
                }

                if (per && perTips) {
                    // 监听 per 的鼠标悬停事件
                    per.addEventListener('mouseenter', function() {
                        clearTimeout(perTimer);
                        perTips.style.display = 'block';
                    });

                    // 监听 per 的鼠标离开事件
                    per.addEventListener('mouseleave', function() {
                        perTimer = setTimeout(function() {
                            perTips.style.display = 'none';
                        }, 300);
                    });

                    // 监听 per-tips 的鼠标进入事件
                    perTips.addEventListener('mouseenter', function() {
                        clearTimeout(perTimer);
                    });

                    // 监听 per-tips 的鼠标离开事件
                    perTips.addEventListener('mouseleave', function() {
                        perTimer = setTimeout(function() {
                            perTips.style.display = 'none';
                        }, 300);
                    });
                }
            });
        },
        toWrite(){
            window.location.href = 'travelogueDraft.html';
        },
        view(id){
            window.location.href = 'travelogueView.html?travelogueId=' + id;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        pageQuery(page) {
            this.page = page;
            this.query("");
        },
        async query(keywords) {
            /* /^\s*$/.test() 是在JavaScript中使用正则表达式来检测一个字符串是否只包含空格，或者是一个空字符串。
        ^ 表示字符串的开始
        $ 表示字符串的结束
        \s* 表示零个或多个空白字符（包括空格、制表符、换页符等）*/

            if (/^\s*$/.test(keywords) ){
                keywords = "";
            }
            await axios.get("/travelogues/action/query?title=" + keywords + "&page=" + this.page + "&size=" + this.size).then(res =>{
                this.travelogues = res.data.rows;
                this.total = res.data.total;
            })

            this.travelogues.forEach( item =>{
                axios.get("/users/getByTid?id=" + item.userId).then( res =>{
                    const userData = res.data.data;
                    Object.keys(userData).forEach(key => {
                        Vue.set(item, key, userData[key]);
                    });
                })
            })
        },
        getParagraphContent(item) {
            const paragraph = item.contentsList.find(content => content.contentType === 'paragraph');
            const text = item.contentsList.find(content => content.contentType === 'text');

            return paragraph && text ? `${paragraph.contentValue}&nbsp;&nbsp;&nbsp;${text.contentValue}` : '';
        },
        getLatest(){
            axios.get("/travelogues/action/queryNewAndHot?flag=" + 1 + "&page=" + this.page + "&size=" + this.size).then(res =>{
                this.travelogues = res.data.rows;
                this.total = res.data.total;
                this.travelogues.forEach( item =>{
                    axios.get("/users/getByTid?id=" + item.userId).then( res =>{
                        const userData = res.data.data;
                        Object.keys(userData).forEach(key => {
                            Vue.set(item, key, userData[key]);
                        });
                    })
                })
            })


        }

    }
})